@import (reference) "fields/tabular.less";


#rb-ns-ui() {
  .issue-summary-table() {
    @avatar-size: 24px;
    @avatar-margin-right: 4px;
    @status-icon-margin-right: 6px;
    @status-icon-size: 16px;
    @avatar-margin-vert-offset:
      #rb-ns-review-requests.fields.tabular.data[@cell-padding] -
      (@avatar-size - @status-icon-size) / 2;

    .mobile() {
      @_icons-full-width: #rb-ns-ui.issue-summary-table[@avatar-size];
      @_icons-margin-right: 4px;
      @_status-icon-margin-horiz:
        (@_icons-full-width -
         #rb-ns-ui.issue-summary-table[@status-icon-size]) / 2;

      @status-icon-margin-left: @_status-icon-margin-horiz;
      @status-icon-margin-right: @_status-icon-margin-horiz +
                                 @_icons-margin-right;
      @text-only-margin-left: @_icons-full-width + @_icons-margin-right;
    }
  }
}


/**
 * The Issue Summary Table, used to filter and view issues on a review request.
 *
 * This is meant to be used along with ``.rb-c-review-request-tabular``, and
 * builds upon that to provide styling for the different issue states.
 */
.rb-c-issue-summary-table {
  @_color-scheme-vars: #rb-ns-ui.color-schemes.grey();
  @_data-vars: #rb-ns-review-requests.fields.tabular.data();
  @_common-vars: #rb-ns-ui.issue-summary-table();
  @_mobile-vars: #rb-ns-ui.issue-summary-table.mobile();

  /**
   * An issue counter on a tab.
   */
  &__counter {
    vertical-align: middle;
  }

  /**
   * A special row indicating that no issues exist matching the filter.
   */
  &__no-issues {
    td {
      background-color: #FFF;
    }
  }

  /**
   * The main table containing the list of issues.
   */
  .rb-c-review-request-field-tabular__data {
    tr {
      @_row-border-color: @_color-scheme-vars[@border];

      /*
       * Sets the background and hover colors for an issue row of a given type.
       */
      ._issue-row-colors(@bg, @hover-bg) {
        &:hover td {
          background-color: @hover-bg;
        }

        td {
          background-color: @bg;
        }
      }

      /* Add borders separating groups of different types of statuses. */
      &:not(.-is-hidden) {
        &.-is-open + .rb-c-issue-summary-table__issue:not(.-is-open),
        &.-is-dropped + .rb-c-issue-summary-table__issue:not(.-is-dropped),
        &.-is-resolved + .rb-c-issue-summary-table__issue:not(.-is-resolved) {
          td {
            border-top-color: @_row-border-color;

            .on-mobile-medium-screen-720({
              border-top-color: transparent;
            });
          }
        }
      }

      &.-is-open {
        ._issue-row-colors(@issue-opened-bg, @issue-opened-hover-bg);
      }

      &.-is-dropped {
        ._issue-row-colors(@issue-discarded-bg, @issue-discarded-hover-bg);
      }

      &.-is-resolved {
        ._issue-row-colors(@issue-resolved-bg, @issue-resolved-hover-bg);
      }

      &.-is-verifying-dropped,
      &.-is-verifying-resolved {
        ._issue-row-colors(@issue-verifying-bg, @issue-verifying-hover-bg);
      }

      .on-mobile-medium-screen-720({
        /*
         * Add a border betwen all sections, but don't add it to the very top.
         * This sort of selector will guarantee all visible rows following the
         * first visible row will have a top border set.
         */
        &:not(.-is-hidden) ~ .issue:not(.-is-hidden) {
          td:first-child {
            border-top-color: @_row-border-color;
          }
        }
      });

      td {
        /*
         * All text should be vertically centered in relation to the issue
         * status icon, meaning we need to give them all the line height of
         * the icon. From there, we'll make further adjustments below.
         */
        line-height: @_common-vars[@status-icon-size];

        /* Description column */
        &:nth-child(1) {
          width: 100%;
        }

        a {
          text-decoration: none;
        }

        p {
          margin: 0;
          padding: 0;
          overflow: hidden;
        }

        time {
          white-space: nowrap;
        }

        .avatar {
          @_offset: @_common-vars[@avatar-margin-vert-offset];

          /*
           * We're aiming to keep all text aligned across the row, and
           * because of this we can't vertically align the avatar and the
           * text exactly. We also can't let the avatar take up too much
           * vertical space on the row.
           *
           * So, we're offsetting the vertical margins a bit to reduce the
           * space required (offsetting into the cell's padding a bit
           * instead) and attempting to align the resulting avatar with the
           * top of the text. This creates a mostly-vertically-centered look
           * while keeping the text aligned.
           */
          margin: -@_offset @_common-vars[@avatar-margin-right]
                  -@_offset 0;
          vertical-align: text-top;
        }

        .rb-icon {
          float: left;
          margin-right: @_common-vars[@status-icon-margin-right];
        }

        .user {
          white-space: nowrap;
        }

        .on-mobile-medium-screen-720({
          white-space: normal;

          /* Description column */
          &:nth-child(1) {
            padding-top: 1em;
            width: auto;

            .rb-icon {
              margin-left: @_mobile-vars[@status-icon-margin-left];
              margin-right: @_mobile-vars[@status-icon-margin-right];
            }
          }

          /* Last Updated column */
          &:nth-child(3) {
            padding-bottom: 1em;

            time {
              /* Align the text. */
              margin-left: @_mobile-vars[@text-only-margin-left];
            }
          }

          /* Usernames that aren't preceded by an avatar. */
          .user span:first-child {
            margin-left: @_mobile-vars[@text-only-margin-left];
          }
        });
      }
    }
  }
}
